<template>
	<!-- 订单卡片 -->
	<view class="bee-box">
		<view class="collect">
			<view class="collect-item" @click="jump('/pages/user/favorite')">
				<image :src="$BASE_URL + userpage[3]" mode="aspectFill"></image>
				<view class="" style="margin: 0 16rpx;">
					收藏商品
				</view>
				<view class="">
					{{userOtherData.collectionCount || 0}}

				</view>
			</view>
			<view class="" style="background-color: #E8BA83;width: 2rpx;height: 40rpx;margin-top: 24rpx;">

			</view>
			<view class="collect-item" @click="jump('/pages/user/mycounp')">
				<image :src="$BASE_URL + userpage[2]" mode="aspectFill"></image>
				<view class="" style="margin: 0 16rpx;">
					优惠券
				</view>
				<view class="">
					{{userOtherData.coupons_num || 0}}
				</view>
			</view>
		</view>
		<view class="sh-order-box  u-m-b-10 u-p-20">
			<view style="font-size: 28rpx;color: #3D3D3D;margin-bottom: 24rpx;margin-left: 20rpx;font-weight: 700;">租赁订单
			</view>
			<view class="order-box u-flex">
				<view class="order-item u-flex-col " @tap="jump('/pages/order/list', { type: order.type })"
					v-for="order in orderNav" :key="order.id">
					<view class="u-flex-col item-box u-col-center">
						<image class="order-img" :src="$BASE_URL + order.img" mode="aspectFill"></image>
						<text class="item-title">{{ order.title }}</text>
						<view class="badge" v-if="orderNum && orderNum[order.type]">{{ orderNum[order.type] }}</view>
					</view>
				</view>
				<!-- 	<view class="order-item u-flex-col " @tap="jump('/pages/order/after-sale/list')">
						<view class="u-flex-col item-box u-col-center">
							<image class="order-img" :src="$BASE_URL + picList[3]" mode="aspectFill"></image>
							<text class="item-title">租用中</text>
						</view>
					</view> -->



			</view>

		</view>
	</view>
</template>

<script>
	/**
	 * 订单中心卡片
	 *
	 */
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				userpage: [],
				orderNav: [{
						id: 1,
						title: '待审核',
						img: '',
						type: '-1'
					},
					{
						id: 2,
						title: '审核通过',
						img: '',
						type: '2'
					},
					{
						id: 3,
						title: '待发货',
						img: '',
						type: '3'
					},
					{
						id: 4,
						title: '待收货',
						img: '',
						type: '4'
					},
					{
						id: 5,
						title: '全部订单',
						img: '',
						type: 'all'
					}

				],
				picList: []
			};
		},
		computed: {
			...mapGetters(['isLogin', 'userOtherData', 'userInfo', 'authType']),

			orderNum() {
				return this.userOtherData.order_num || 0;
			}
		},
		mounted() {
			this.getpic()
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'logout']),
			go() {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				})


			},
			getpic() {
				this.$http('common.getPic', {}).then(res => {
					if (res.code === 1) {
						console.log(res);
						this.picList = res.data.result.orderIcon
						this.userpage = res.data.result.userpage
						this.orderNav[0].img = this.picList[0]
						this.orderNav[1].img = this.picList[3]
						this.orderNav[2].img = this.picList[1]
						this.orderNav[3].img = this.picList[2]
						this.orderNav[4].img = this.picList[4]

					}
				});
			},



			jump(path, query) {
				let mobile = uni.getStorageSync('userInfo').mobile

				// console.log(uni.getStorageSync('userInfo'));
				if (mobile) {
					this.$Router.push({
						path: path,
						query: query
					});
				} else {
					!this.userInfo.verification.mobile && this.showAuthModal('bindMobile');


				}

			}
		}
	};
</script>

<style lang="scss">
	.badge {
		position: absolute;
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		line-height: 24rpx;
		padding: 4rpx 10rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 24rpx;
		z-index: 9;
		background-color: $u-type-error;
		transform: scale(0.8);
		transform-origin: center center;
		left: 100rpx;
		top: -6rpx;
		white-space: nowrap;
	}



	.collect {
		width: 660rpx;
		height: 80rpx;
		border-radius: 16rpx;
		opacity: 1;
		margin: 0 auto;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		background: linear-gradient(104deg, #F9E8D0 -5%, #FADCB7 100%);
		box-sizing: border-box;
		display: flex;

		.collect-item {
			padding-top: 24rpx;
			padding-bottom: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #3D3D3D;
			width: 49%;
			height: 100%;
			// background-color: #fff;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

	}

	// 订单卡片
	.sh-order-box {
		// position: absolute;
		height: 180rpx;
		width: 710rpx;
		margin: 20rpx auto;
		margin-top: 0;
		z-index: 999;
		border-radius: 20rpx;
		background: #fff;

		.order-box {
			flex: 4;
		}

		.all-order {
			position: relative;

			.cut-off--line {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: (750rpx/5) - 15rpx;
				width: 30rpx;
				height: 136rpx;
			}
		}

		.order-item {
			flex: 1;

			.item-box {
				position: relative;
			}

			.order-img {
				width: 46rpx;
				height: 46rpx;
			}

			.item-title {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				line-height: 24rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>
